<template>
  <div class="accordion">
    <div :class="{ 'left-panel': isLeftExpanded, 'right-panel': !isLeftExpanded }">
      <div v-for="item in scrollContent.Female_frequency_data" data-set="item.id" :key="item.id" class="novel-info">
        <div class="image-container">
          <img :src="item.img_url" alt="Novel Image" class="novel-image" />
        </div>
        <div class="info">
          <h6>{{ item.title }}</h6>
          <p>{{ item.author }}</p>
        </div>
      </div>
    </div>
    <div :class="{ 'right-panel': isLeftExpanded, 'left-panel': !isLeftExpanded }">
      <div v-for="item in scrollContent.Female_frequency_data" data-set="item.id" :key="item.id" class="novel-info">
        <div class="image-container">
          <img :src="item.img_url" alt="Novel Image" class="novel-image" />
        </div>
        <div class="info">
          <h6>{{ item.title }}</h6>
          <p>{{ item.author }}</p>
        </div>
      </div>
    </div>
    <button @click="toggleAccordion">Toggle</button>
  </div>
</template>
  
  <script setup lang="ts">
import { ref, reactive } from 'vue'
// 导入接口
import { Female_frequency } from '@/axios/modules/get'

const isLeftExpanded = ref(true)
const scrollContent = reactive({
  Female_frequency_data: []
})

// 点击函数
const toggleAccordion = () => {
  isLeftExpanded.value = !isLeftExpanded.value
}
// 女频接口
Female_frequency().then((res) => {
  scrollContent.Female_frequency_data = res.data
})
</script>
  
  <style lang="scss">
.accordion {
  display: flex;
  width: 100%;

  .left-panel,
  .right-panel {
    transition: all 0.5s ease;
    display: flex;
  }

  .left-panel {
    flex: 8;
    max-width: 80%;
  }

  .right-panel {
    flex: 2;
    max-width: 20%;
  }

  @media (max-width: 768px) {
    .left-panel,
    .right-panel {
      flex: 1;
      width: 100%;
      max-width: none;
    }
  }

  .left-panel.collapsed {
    max-width: 20%;
  }

  .right-panel.collapsed {
    max-width: 80%;
  }

  .novel-info {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 20px 10px;
    flex-direction: column;
    text-align: center;
    width: 100px;

    .image-container {
      width: 100%;
      height: 150px;
      overflow: hidden;
    }

    .novel-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .info {
      display: flex;
      flex-direction: column;

      h6 {
        margin: 0;
      }

      p {
        margin: 0;
        color: gray;
      }
    }
  }
}
</style>